<template>
  <div class="audit">
    <!-- 小工具 -->
    <div>
      <div class="nucleicAcid">
        <div class="title">查询48小时核酸</div>
        <van-field
          input-align="right"
          label="姓名"
          v-model="resultsData.name"
          name="pattern"
          placeholder="请输入姓名"
          :rules="[{ required: true }]"
        />
        <div class="trip">
          <van-field
            input-align="right"
            label="身份证号"
            v-model="resultsData.card"
            name="pattern"
            placeholder="请输入身份证号"
            :rules="[{ required: true }]"
          >
            <template #button>
              <van-button size="small" type="primary" @click="getHsJcJg">查询</van-button>
            </template>
          </van-field>
        </div>
        <van-field
          input-align="right"
          label="最新核酸检测结果"
          v-model="results.hesuan_result1"
          name="pattern"
          readonly
          placeholder="最新核酸检测结果"
        />
      </div>
      <div class="nucleicAcid">
        <div class="title">查询风险地区</div>
        <van-field
          input-align="right"
          label="手机号码"
          v-model="resultsData.phone"
          name="pattern"
          placeholder="手机号码"
          :rules="[{ pattern, required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              native-type="button"
              @click="getPhoneCode(resultsData.phone)"
              :disabled="smsMsg1 != '发送验证码'">{{smsMsg1}}</van-button>
          </template>
        </van-field>
        <van-field
          input-align="right"
          label="输入验证码"
          v-model="resultsData.verificationCode"
          name="pattern"
          maxlength="6"
          placeholder="请输入验证码"
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button size="small" type="primary" native-type="button" @click="getRisk">查询</van-button>
          </template>
        </van-field>
        <div class="field">
          <div class="label" style="margin-left: .8rem">是否途经风险地区</div>
          <div class="text" style="margin-right: .8rem">
            <div
              :class="{ 'icon': xcData.quguo_high_risk == '1', 'icon1': xcData.quguo_high_risk == '2' }"
            ></div>
            <div
              :class="{ 'value': xcData.quguo_high_risk == '1', 'value1': xcData.quguo_high_risk == '2' }"
            >{{ xcData.quguo_high_risk == '1' ? '未途经' : xcData.quguo_high_risk == '2' ? '途经' : xcData.quguo_high_risk == '3' ? '未查询到行程记录' : '' }}</div>
          </div>
        </div>
      </div>
      <div class="nucleicAcid">
        <div class="title">查询行程轨迹</div>
        <van-field
          input-align="right"
          label="车牌号码"
          v-model="trip.vehicleNo"
          name="pattern"
          readonly
          @click="keyState = true"
          placeholder="请输入车牌号码"
        />
        <van-field
          input-align="right"
          readonly
          clickable
          label="车牌颜色"
          :value="projectNameValue2.lable"
          placeholder="请选择车牌颜色"
          @click="showPicker_t = true"
        />
        <van-field
          input-align="right"
          readonly
          label="开始时间"
          :value="trip.start"
          placeholder="请选择开始时间"
          @click="goIntime = true"
        />
        <van-field
          input-align="right"
          readonly
          label="结束时间"
          :value="trip.end"
          placeholder="请选择结束时间"
          @click="goIntime1 = true"
        />
        <van-button type="primary" @click="track" class="btnClass">查询</van-button>
      </div>
    </div>
    <!-- 小工具 -->
    <van-popup v-model="showPicker_t" round position="bottom">
      <van-picker
        title="请选择车辆车牌颜色"
        show-toolbar
        :columns="projectListArr"
        value-key="lable"
        @cancel="showPicker_t = false"
        @confirm="changeConfirm"
      />
    </van-popup>
    <!-- 车牌号码 -->
    <keyword
      :isShow="keyState"
      @exit="confirm"
      @inputchange="getKey"
      :oinp="trip.vehicleNo"
      @ok="confirm"
    />
    <van-popup v-model="goIntime" round position="bottom">
      <van-datetime-picker
        @confirm="getConfirm1"
        @cancel="goIntime = false"
        v-model="currentDate"
        type="datehour"
        :min-date="minDate1"
      />
    </van-popup>
    <van-popup v-model="goIntime1" round position="bottom">
      <van-datetime-picker
        @confirm="getConfirm2"
        @cancel="goIntime1 = false"
        v-model="currentDate1"
        type="datehour"
        :min-date="minDate2"
      />
    </van-popup>
    <van-popup v-model="showMap" round closeable>
      <div class="mapOut" v-if="showMap">
        <div class="title">行程轨迹</div>
        <VueBaiduMap
          :vehicleNo="trip.vehicleNo"
          :vehicleColor="trip.vehicleColor"
          :start="trip.start"
          :end="trip.end"
          @clear="showMap = false"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import {
  // getCargoTransportationInfoAc,
  // getCompanyInfo,
  t_getHsJcJg,
  // t_getHs_siji_tongxing,
  // updateWorkerSh,
  getCode,
  judgeWarning
  // distinguishSstErCode,
  // getQyBaInfo
} from '../../../api/gov/home/index'
// import { areaList } from '@vant/area-data'
import keyword from '../../../components/keyword'
import VueBaiduMap from '@/components/Map'
import moment from 'moment'
export default {
  components: {
    keyword,
    VueBaiduMap
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      smsMsg1: '发送验证码',
      pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      resultsData: {
        name: '', // 查询核酸时填写姓名
        card: '', // 查询核酸时填写身份证号
        phone: '', // 查询行程时手机号
        verificationCode: '', // 查询行程时验证码
        hscy: '1', // 核酸采样
        temperature: '1', // 体温
        type: '1', // 冷链 非冷链
        worker_jkzm: '1', // 健康证明

        familyMembers: '', // 居家隔离家属姓名
        familyMembersPhone: '', // 居家隔离家属电话

        concentratedType: '0', // 集中隔离原因
        concentratedTw: '' // 集中隔离体温
      },
      results: {
        hesuan_result1: '', // 结果
        hesuan_result: '', // 结果
        hesuan_detail: '' // 详情
      }, // 获取到的核酸检测结果
      xcData: {
        quguo_high_risk: ''
      }, // 风险地区结果
      trip: { // 车辆行程轨迹
        vehicleNo: '', // 车牌号
        vehicleColor: '', // 车牌颜色
        start: '', // 开始时间
        start1: '', // 开始时间
        end: '', // 结束时间
        end1: '' // 结束时间
      },
      isInAndOuts: null, // 1.出沈 2.入沈 3.返沈
      projectNameValue2: '', // 车牌颜色
      keyState: false,
      showPicker_t: false,
      goIntime: false,
      goIntime1: false,
      currentDate: new Date(),
      currentDate1: new Date(),
      minDate1: new Date(1990, 1, 1),
      minDate2: new Date(1990, 1, 1),
      showMap: false,
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ]
    }
  },
  mounted () {
    this.isInAndOuts = this.$route.query.value
    console.log('tool this.formData', this.formData)
    this.trip.vehicleNo = this.formData.car_number
    this.trip.vehicleColor = this.formData.chepai_color
    this.projectNameValue2 = { lable: this.formData.chepai_color_name }
  },
  methods: {
    // 获取核酸检测结果
    getHsJcJg () {
      console.log(this.resultsData.name, '名')
      console.log(this.resultsData.card, '证号')
      if (!this.resultsData.name || !this.resultsData.card) {
        return false
      }
      // 获取核酸检测结果
      t_getHsJcJg({ name: this.resultsData.name, card_no: this.resultsData.card }).then(ret => {
        if (ret.data.errcode == 0) {
          const data = JSON.parse(ret.data.data.data)
          const prs = JSON.parse(data.data)
          if (prs.data != '') {
            this.results.hesuan_result = prs.data.hsjcjg
            this.results.hesuan_detail = prs.data.hsjcsj
            this.results.hesuan_result1 = prs.data.hsjcjg + '(' + prs.data.hsjcsj + ')'
          } else {
            this.$dialog.alert({
              message: '未查询到核酸结果'
            })
            this.results.hesuan_result1 = '未查询到核酸结果'
          }
        } else {
          this.results.hesuan_result1 = '国家核酸检测接口请求失败'
        }
      })
    },
    // 获取验证码
    getPhoneCode (phone) {
      if (!phone) { Toast.success('请填写手机号'); return }
      getCode({ phone }).then((res) => {
        if (res.data.errcode == 0) {
          const toa = res.data.data.data.result == null ? res.data.data.data.errorDesc : res.data.data.data.result
          Toast.success(toa)
          this.smsMsg1 = 60
          var Interr = setInterval(() => {
            if (this.smsMsg1 <= 1) {
              this.smsMsg1 = '发送验证码'
              clearInterval(Interr)
            } else {
              this.smsMsg1 -= 1
            }
          }, 1000)
        }
      })
    },
    // 拿去途经地结果
    getRisk () {
      const obj = {
        phone: this.resultsData.phone,
        verification: this.resultsData.verificationCode
      }
      if (!obj.phone) {
        Toast.success('请填写手机号')
        return
      }
      if (!obj.verification) {
        Toast.success('请填写验证码')
        return
      }
      judgeWarning(obj).then((res) => {
        if (res.data.errcode == 0) {
          this.xcData.quguo_high_risk = res.data.data.data.result.value
        }
      })
    },
    // 查询车辆形成轨迹 地图
    track () {
      if (!this.trip.vehicleNo || !this.trip.vehicleColor || !this.trip.start || !this.trip.end) {
        this.$dialog.alert({
          message: '填写信息不全'
        })
        return false
      }
      this.showMap = true
      // this.trip.start1 = moment(this.trip.start).format('YYYY-MM-DD 00:00:00')
      // this.trip.end1 = moment(this.trip.end).format('YYYY-MM-DD 23:59:59')
    },
    // 车牌颜色
    changeConfirm (val, index) {
      this.projectNameValue2 = val // 传值
      this.trip.vehicleColor = val.value
      this.showPicker_t = false
      console.log(index) // 索引
    },
    getConfirm1 (value) {
      this.trip.start = moment(value).format('YYYY-MM-DD HH:00:00')
      this.goIntime = false
    },
    getConfirm2 (value) {
      this.trip.end = moment(value).format('YYYY-MM-DD HH:00:00')
      this.goIntime1 = false
    },
    // 车牌号码
    confirm () {
      this.keyState = false
    },
    getKey (val) {
      if (this.trip.vehicleNo.length >= 8 && val != 'delete') {
        return false
      }
      if (val == 'delete') {
        this.trip.vehicleNo = this.trip.vehicleNo.slice(0, this.trip.vehicleNo.length - 1)
      } else {
        this.trip.vehicleNo += val
      }
    }
  }
}
</script>
<style lang="less" scoped>
.audit {
  .title {
    padding: 0.533rem 0.853rem;
    font-size: 0.747rem;
    color: #646566;
  }
  /deep/.van-field__label {
    width: 9em;
    display: flex;
    align-items: center;
  }
  .img_list {
    margin: 20px 0.853rem;
    display: flex;
    img {
      width: 120px;
      height: 120px;
      margin-right: 20px;
    }
  }
}
.czInfo {
  height: 80px;
  font-size: 32px;
  //font-weight: bold;
  //color: white;
  //background-color: #58be6a;
  background-color: #eee;
  display: flex;
  align-items: center;
  div {
    width: 690px;
    margin: 0 auto;
  }
}
.nucleicAcid {
  width: 690px;
  margin: 40px auto;
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
  //border: 1px solid #DDEEE3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  .title {
    text-align: center;
    font-size: 28px;
    color: white;
    background-color: #58be6a;
  }
}
.btn {
  width: 150px;
}
.field {
  width: 690px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebedf0;
  margin: 0 auto;
  box-sizing: border-box;
  .label {
    font-size: 28px;
    color: #646566;
    flex-shrink: 0;
  }
  .text {
    font-size: 28px;
    color: #646566;
    display: flex;
    align-items: center;
    .icon {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      background-color: #58be6a;
      flex-shrink: 0;
      margin-right: 5px;
    }
    .icon1 {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      flex-shrink: 0;
      background-color: red;
      margin-right: 5px;
    }
    .value {
      color: #58be6a;
    }
    .value1 {
      color: red;
    }
  }
}
.concentrated /deep/.van-field__label {
  width: 6.3em;
}
//.concentrated /deep/ .van-radio--horizontal{
//  margin-top: 10px;
//  margin-left: 160px;
//}
.btnClass {
  width: 95%;
  margin: 20px 18px;
}
.mapOut {
  width: 690px;
  height: 1000px;
  background-color: white;
  .title {
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    text-align: center;
  }
}
.trip /deep/.van-field__label {
  width: 8em;
}
</style>
